<template>
    <div class="cl-tertiary-nav">
        <div class="wrapper" v-for="(n, i) in data">
            <div class="item" :class="{ selected: current === i }" @click="handleClick(i)">
                <div class="label">{{ n.text || n }}</div>
                <div v-if="n.bubble" class="bubble">{{ n.bubble }}</div>
                <div class="underline" :class="{ selected: current === i }"></div>
            </div>
            <cl-divider v-if="i < data.length - 1"></cl-divider>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ClTertiaryNav',
    props: {
        data: Array,
        init: Number
    },
    data() {
      return {
          current: 0
      }
    },
    mounted() {
        if (this.init) this.current = this.init
    },
    methods: {
        handleClick(i) {
            this.current = i
            this.$emit('click', i)
        }
    },
    watch: {
        init() {
            this.current = this.init
        }
    }
}
</script>

<style lang="less" scoped>
    @import "../../assets/css/variable/variable.less";

    .cl-tertiary-nav {
        display: flex;
        align-items: center;

        .wrapper {
            display: flex;
            align-items: center;
        }

        .item {
            position: relative;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            color: @contentColor;

            padding: 0 14px;
            cursor: pointer;

            .label {
                padding: 4px 0;

                &:hover {
                    color: @primaryColor;
                }
            }

            .underline {
                width: 30px;
                height: 2px;
                background: transparent;
            }

            .bubble {
                position: absolute;
                top: -4px;
                right: 3px;

                display: flex;
                align-items: center;
                justify-content: center;

                padding: 1px 4px;
                border-radius: 12px;
                background: @warnColor;

                color: white;
                font-size: 8px;
            }

            .selected {
                background: @primaryColor;
            }
        }

        .selected {
            color: @primaryColor;
        }
    }
</style>
